<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>冒险岛官方网站(MapleStory)-爱我就来冒险吧！</title>
    <!--  <link href="css/index_css.css" rel="stylesheet" type="text/css"> -->
    <style>
        * {
            margin: 0px;
            padding: 0px;
            list-style: none;
            text-decoration: none;
        }
        /* 头部logo */
        #headwrap {
            width: 100%;
        }

        #navlogo {
            width: 1350px;
            /* 用百分比会造成右侧DIV 跟随移动 */
            background-color: #fff;
            margin: 0 auto;

        }
        /* 盒子塌陷，在父元素盒子中添加 */
        #navlogo::after {
            content: "";
            display: block;
            clear: both;
        }

        #navlogo .logo {
            background: url("image/logo.png") no-repeat;
            width: 175px;
            /* 有背景图需要指出div大小 */
            background-size: 300px 40px;
            margin-top: 7px;
            margin-left: 25px;
            float: left;
        }

        #navlogo .logo a {
            display: block;
            height: 45px;
            text-indent: -9999px;
        }

        #navlogo .server {
            float: right;
            margin-top: 10px;
            margin-right: 30px;
        }

        #navlogo .server li {
            float: left;
            font-size: 15px;
            font-weight: 600;
            margin-right: 18px;
            padding-top: 15px;

        }

        #navlogo .server li a {
            color: #494949;
        }

        #navlogo .server li a:hover {
            color: red;
        }
        
        /* 定义中间内容，包括了头部的导航、商品展示。 */
        #contentwrap {
            width: 1366px;
            background: url("image/bgpic.jpg") no-repeat 50% 0;
            position: relative;


        }
       
        #contentwrap #header {
            margin: 0 auto;
            width: 1200px;
            height: 350px;
            position: relative;
        }

        #header .malpic {
            position: absolute;

        }

        #header .malpic p {
            font-size: 13px;
        }

        #header .navbar {
            position: absolute;
            ;
            background-position: 0 2px;
            left: 300px;
        }

        #header ul {
            float: right;
        }
        #header ul li {
            float: left;
            color: #fff;
            font-size: 16px;
            font-weight: 600;
            font-family: 'Microsoft Yahei';
            margin-right: 60px;
            margin-top: 25px;
        }

        #header ul li:last-child {
            margin-right: 0;
        }

        #header ul i {
            font: 11px "Microsoft YaHei", "\5FAE\8F6F\96C5\9ED1", arial, tahoma, sans-serif;
            color: #979797;
            line-height: 14px;
            font-style: normal;
            font-variant: small-caps;
            display: block;
            margin-top: -2px;
            text-transform: uppercase;
            font-size: 1px;
            text-align: center;
        }
        
       
        #contentwrap .newslist {
            width: 100%;
            height: 350px;
            position: absolute;
            background: url("image/nav_bg2.png") no-repeat;
            margin-top: -350px;
            transition: 0.5s;

        }

        .newslist li {
            color: #fff;
            font-size: 12px;
            width: 100px;
            text-align: center;
            margin-bottom: 5px;
        }

        .download {
            margin-left: 495px;
            margin-top: 80px;
            float: left;
        }

        .news {
            float: left;
            margin-left: 35px;
            margin-top: 80px;
        }

        .info {
            float: left;
            margin-left: 22px;
            margin-top: 80px;
        }

        .pay {
            float: left;
            margin-left: 25px;
            margin-top: 80px;
        }

        .interaction {
            float: left;
            margin-left: 22px;
            margin-top: 80px;
        }

        .service {
            float: left;
            margin-left: 40px;
            margin-top: 80px;
        }

        #contentwrap #snews {
            margin: 0 auto;
            width: 1200px;
            height: 310px;
            background: url("image/newsbg.png") no-repeat;
        }

        #snews .newsleft {
            background: url("image/mbtn_bg.png");
            width: 254px;
            height: 335px;
            float: left;
            margin-top: -45px;
            margin-left: 20px;
            position: relative;
            cursor: pointer;
        }

        .newsleft .down {
            background: url("image/download_bg.png");
            width: 213px;
            height: 213px;
            left: 20px;
            position: absolute;
            top: -65px;
        }

        .newsleft .down div {
            width: 213px;
            height: 213px;
            text-indent: -999px;
            background: url("image/download_btn.png");
            transition: 1s;
        }

        .newsleft .downlist {
            width: 206px;
            height: 188px;
            background: url("image/qlink.png");
            position: absolute;
            top: 130px;
            left: 20px;
        }

        .downlist li {
            width: 208px;
            height: 32px;
        }

        .downlist li img {
            display: none;
        }

        .downlist li:hover img {
            display: block;
        }

        .downlist li em {
            text-indent: -999px;
            display: block;
        }

        #newscenter {
            width: 520px;
            height: 280px;
            float: left;
            margin-left: 40px;
            margin-top: 10px;
        }

        .centertitle ul {
            width: 515px;
            height: 28px;
            margin-top: 10px;
            border-bottom: 2px solid #ffd118;
            cursor: pointer;

        }

        .centertitle li {
            float: left;
            width: 108px;
            background-color: rgb(16, 21, 31);
            margin-right: 8px;
            text-align: center;
            line-height: 28px;
            display: block;
            font-size: 14px;
            color: #8c9ca9;
            font-family: 'Microsoft Yahei';
            border-radius: 5px;
        }

        .centertitle em {
            float: left;
            text-indent: -999px;
            background: url("image/news_more.png") no-repeat;
            width: 20px;
            height: 20px;
            margin-left: 20px;
            margin-top: 3px;
        }

        .centertitle .lion {
            line-height: 31px;
            width: 105px;
            background: url("image/news-tab_hover.png") no-repeat;
            background-color: rgb(34, 43, 64);
        }

        .centerinfo {
            width: 510px;
            height: 240px;
            float: left;
            font-size: 12px;
        }

        .centerinfo li {
            margin-top: 8px;
            width: 510px;

        }

        .centerinfo span {
            color: #ffab00
        }

        .centerinfo p {
            color: #fc3b3b;
            margin-left: 12px;
            font-weight: bold;
            display: inline;
        }

        .centerinfo em {
            color: #fff;
            float: right;
            font-style: normal;
        }

        .centerinfo .fontcolor1 {
            color: #ffd118;
        }

        .centerinfo .fontcolor2 {
            color: #fff;
        }

        #newsright {
            float: left;
            width: 312px;
            height: 263px;
            margin-top: 20px;
            position: relative;
            cursor: pointer;
            overflow: hidden;

        }

        #newsright ul {
            position: absolute;
            width: 300%;
            transition: 0.8s;
        }

        #newsright li {
            float: left;
        }

        #newsright div span {
            position: absolute;
            top: 120px;
            width: 30px;
            height: 30px;
            display: block;
            line-height: 30px;
            color: #fff;
            font-size: 20px;
            text-align: center;
            background: rgba(0, 0, 0, .3);
            border-radius: 50%;
            display: none;
        }

        #newsright div span:hover {
            background: rgba(0, 0, 0, .6);
        }

        #newsright div .rightspan {
            right: 0;
        }

        #newsright:hover span {
            display: block;
        }

        #shoplist {
            margin-left: 83px;
            width: 1160px;

        }

        #shoplist::after {
            content: "";
            display: block;
            clear: both;
        }

        #shoplist .shopleft {
            float: left;
        }

        .shopleft .slone {
            position: relative;
            width: 258px;
            height: 216px;
            border: 1px rgba(0, 0, 0, .3) solid;
            border-radius: 6px;
        }

        .shopleft .slonepic {
            position: absolute;
        }

        .shopleft .slonese {
            position: absolute;
            left: 35px;
            bottom: 10px;
        }

        .shopleft .slonese select {
            width: 180px;
            height: 25px;
            color: #666;
            border: solid 1px #e2e2e2;
            line-height: 25px;
        }

        .sltwo {
            width: 258px;
            height: 380px;
            border: 1px rgba(0, 0, 0, .3) solid;
            border-radius: 6px;
            margin-top: 20px;
        }

        .sltwo h3 {
            background: url("image/gameService-hd.jpg") no-repeat;
            height: 41px;
            text-indent: -999px;
            border-bottom: dotted 1px #c9c9c9;
            padding: 8px 0;
            margin: 10px;
        }

        .sltwo p {
            font-size: 12px;
            line-height: 22px;
            color: #696969;
            padding: 0px 0 7px 32px;
        }

        .sltwo ul {
            margin-left: 22px;
        }

        .sltwo li {
            width: 211px;
            height: 25px;
            margin-bottom: 8px;
            border: 1px red solid;

        }

        .sltwo .q1 {
            background: url("image/gameServicelink.png");
        }

        .sltwo .q2 {
            background: url("image/gameServicelink.png") 0 -33px;
        }

        .sltwo .q3 {
            background: url("image/gameServicelink.png") 0 -66px;
        }

        .sltwo .q4 {
            background: url("image/gameServicelink.png") 0 -132px;
        }

        .sltwo em {
            display: block;
            text-indent: -9999px;
        }

        .sltwo .q1:hover {
            background: url("image/gameServicelink1_hover.png");
        }

        .sltwo .q2:hover {
            background: url("image/gameServicelink2_hover.png");
        }

        .sltwo .q3:hover {
            background: url("image/gameServicelink3_hover.png");
        }

        .sltwo .q4:hover {
            background: url("image/gameServicelink4_hover.png");
        }

        .slthree {
            width: 256px;
            height: 222px;
            border: 1px rgba(0, 0, 0, .3) solid;
            border-radius: 9px;
            margin-top: 20px;
            position: relative;
        }

        .slthree div li {
            width: 128px;
            height: 48px;
            float: left;
            line-height: 48px;
            text-align: center;
            font-size: 12px;
            color: #a4a4a4;
            cursor: pointer;
        }

        .wwclick {
            color: #fff;
            background: url("image/weixin-hd.png") no-repeat;
        }

        .wwclick1 {
            color: #fff;
            background: url("image/weixin-hd.png") no-repeat 0px -51px;
        }

        .wwclick::after {
            display: block;
            content: "";
            clear: both;
        }

        .wwclick1::after {
            display: block;
            content: "";
            clear: both;
        }

        .wwpic li {
            position: absolute;
            top: 50px;
            left: 48px;
            opacity: 0;
            transition: 0.5s;
        }

        .wwpic li:first-child {
            opacity: 1;
        }

        .shopcenter {
            float: left;
            margin-left: 20px;
        }

        .shopcenter .scone {
            width: 615px;
            height: 215px;
            border: 1px rgba(0, 0, 0, .3) solid;
            border-radius: 9px;
            background: url("image/shopping_bg.png") no-repeat;
            position: relative;

        }

        .scone::after {
            display: block;
            clear: both;
            content: "";
        }

        .scone>img {
            float: right;
            margin-right: 55px;
            margin-top: 7px;
            cursor: pointer;
        }

        .scone span {
            width: 28px;
            height: 28px;
            position: absolute;
            text-indent: -9999px;
            cursor: pointer;
        }

        .spannleft {
            background: url("image/arrow2.png") no-repeat;
            top: 90px;
            left: 5px;
        }

        .spanright {
            background: url("image/arrow2.png") no-repeat -28px 0;
            top: 90px;
            right: 5px;
        }

        .scone .ulwrap {
            width: 540px;
            height: 165px;
            position: absolute;
            top: 48px;
            left: 44px;
            cursor: pointer;
            overflow: hidden;

        }

        .scone ul {
            width: 2704px;
            transition: 0.8s;
            /*   border: 1px red solid; */

        }

        .scone ul li {
            float: left;
            width: 110px;
            height: 165px;
            margin-right: 28px;
            background: url("image/pic1_bg.png") no-repeat
        }

        .scone ul li:last-child {
            margin-right: 0;
        }

        .scone ul li img {
            margin-top: 12px;
            margin-left: 5px;
        }

        .ulwrap div {
            background: url("image/pic1-item1.png") no-repeat 5px 5px;
        }

        .ulwrap div p {
            color: #000;
            font-size: 12px;
            line-height: 20px;
            margin-top: 12px;
            padding-left: 20px;
            white-space: nowrap;
            background: url("image/pic1-item2.png") no-repeat 5px 24px;
        }

        .scthree {
            width: 612px;
            position: relative;
            top: 20px;
            overflow: hidden;
        }

        .scthree:hover span {
            display: block;
        }

        .scthree span {
            width: 40px;
            height: 40px;
            background-color: rgba(0, 0, 0, .3);
            color: #fff;
            line-height: 35px;
            text-align: center;
            position: absolute;
            top: 55px;
            border-radius: 50%;
            font-size: 24px;
            display: none;
            cursor: pointer;
        }

        .scthree span:hover {
            background-color: rgba(0, 0, 0, .6);
        }

        .scthree .scthreeleft {
            left: 10px;
        }

        .scthree .scthreeright {
            right: 10px;
        }

        .scthree ul {
            width: 2448px;
            transition: 0.8s;

        }

        .scthree ul li {
            float: left;
        }

        .scfour {
            width: 613px;
            height: 213px;
            margin-top: 38px;
            border: 1px rgba(0, 0, 0, .3) solid;
            border-radius: 9px;
            background: url("image/playWorld_bg.png") no-repeat;

        }

        .scfour ul {
            width: 565px;
            margin: auto;
            margin-top: 45px;
        }

        .scfour ul span {
            color: #fc3b3b;
        }

        .scfour ul li {
            color: #646464;
            font-size: 12px;
            margin-bottom: 5px;
            font-style: normal;
        }

        .scfour ul li p {
            display: inline;
            margin-left: 5px;
            font-weight: 600px;
        }

        .scfour ul li em {
            float: right;
        }

        .scfive {
            width: 613px;
            height: 220px;
            background: url("image/media_bg.png") no-repeat;
            margin-top: 20px;
            border: 1px rgba(0, 0, 0, .3) solid;
            border-radius: 9px;

        }

        .scfive span {
            width: 30px;
            height: 30px;
            background-color: rgba(0, 0, 0, .3);
            font-size: 18px;
            text-align: center;
            line-height: 30px;
            border-radius: 50%;
            margin-top: 100px;
            float: left;
            color: #e2e2e2;
            cursor: pointer;
        }

        .scfive span::selection {
            background: none;
        }

        .scfive div {
            margin: 0 auto;
            margin-top: 40px;
            width: 530px;
            overflow: hidden;
            cursor: pointer;
        }

        .scfive ul {
            width: 1060px;
        }

        .scfive ul li {
            float: left;
        }

        #shopright {
            float: right;

        }

        #shopright .srone {
            width: 256px;
            cursor: pointer;
        }

        .srone li {
            position: relative;
            width: 256px;
            margin-bottom: 20px;
            height: 94px;
        }

        .srone .one {
            background: url("image/rlink.png") no-repeat;
        }

        .srone li:hover em {
            position: absolute;
            top: 16px;
            right: 2px;
            width: 76px;
            height: 76px;
            transition: 1s;
            background: url("image/rlink_hover.png") no-repeat;
        }

        .srone .two {
            background: url("image/rlink.png") no-repeat 0 -94px;

        }

        .srone .three {
            background: url("image/rlink.png") no-repeat 0 -188px;

        }

        .srtwo {
            position: relative;
            width: 254px;
            height: 280px;
            background: url("image/master_bg.png") no-repeat;
        }

        .srtwo ul {
            position: absolute;
            top: 45px;
            left: 20px;
        }

        .srtwo ul img {
            width: 212px;
            height: 125px;
            margin-top: 2px;
            margin-left: 2px;

        }

        .srtwo li {
            position: relative;
            width: 216px;
            height: 130px;
            background: url("image/master-pic-bg.png")
        }

        .srtwo p {
            padding: 3px 0;
            color: #000;
            line-height: 20px;
            font-size: 12px;
            padding-left: 45px;
            background: url("image/master-icon.png") no-repeat 28px 8px;
        }

        .srtwo p:last-child {
            border-bottom: dotted 1px #9b9b9b;
        }

        .srtwo>div {
            position: absolute;
            left: 25px;
            top: 240px;
            width: 211px;
            height: 25px;
            background: url("image/master-btn.png")
        }

        .srtwo>div:hover {
            background: url("image/master-btn-hover.png");
        }

        .srthree {
            margin-top: 20px;
            width: 254px;
            height: 200px;
            border: 1px rgba(0, 0, 0, .3) solid;
            border-radius: 9px;
            background: url("image/cooperation_bg.png")
        }

        .srthree>div {

            margin-top: 50px;
            width: 235px;
            margin: 50px auto 0 auto;
            overflow: hidden;
            position: relative;
            cursor: pointer;
        }

        .srthree>div>div:hover {
            margin-left: 0px;
            transition: 0.8s;

        }

        .srthree>div>div {
            margin-left: -87px;
            transition: 0.8s;
        }

        .srthree div::after {
            content: "";
            display: block;
            clear: both;
        }

        .srthree ul {
            position: absolute;
            top: 0;
            left: 90px;
            cursor: pointer;
        }

        .srthree ul li {
            width: 126px;
            height: 30px;
            margin-bottom: 7px;
            text-align: center;
            line-height: 30px;
            color: #fff;
            font-size: 15px;
            background: url("image/cooperation_btn.png");
            transition: 0.5s;
        }

        .srthree ul li:hover {
            transition: 0.5s;
            background: url("image/cooperation_btn.png") 0 -30px;
        }

        #footer {
            width: 100%;
            height: 70px;
            position: relative;
            overflow: hidden;
            margin-top: 10px;
        }

        #footer ul {
            width: calc(2220*2px);
            height: 100%;
            position: absolute;
        }

        #footer li {
            float: left;
        }
    </style>
</head>

<body>
    <div id="headwrap">
        <div id="navlogo">
            <div class="logo">
                <a href="http://mxd.sdo.com/web6/home/index.asp" target="_blank">盛大logo</a>
            </div>
            <div class="server">
                <ul>
                    <li><a href="http://mxd.sdo.com/web6/home/index.asp" target="_blank">充值</a></li>
                    <li>|</li>
                    <li><a href="http://mxd.sdo.com/web6/home/index.asp">彩虹客户</a></li>
                </ul>
            </div>
        </div>
    </div>
    <div id="contentwrap">
        <div class="newslist">
            <div class="download">
                <ul>
                    <li>客户端下载</li>
                    <li>补丁下载</li>
                    <li>游戏内置视频下载</li>
                    <li>S档案馆</li>
                </ul>
            </div>
            <div class="news">
                <ul>
                    <li>综合新闻</li>
                    <li>热门活动</li>
                    <li>商品促销</li>
                    <li>最新公告</li>
                </ul>
            </div>
            <div class="info">
                <ul>
                    <li>游戏介绍</li>
                    <li>新手上路</li>
                    <li>新手成长</li>
                    <li>高手进阶</li>
                    <li>历史版本</li>
                </ul>
            </div>
            <div class="pay">
                <ul>
                    <li>我要充值</li>
                    <li>充值热点问题</li>
                    <li>冒险卷兑换</li>
                </ul>
            </div>
            <div class="interaction">
                <ul>
                    <li>游戏论坛</li>
                    <li>新浪微博</li>
                    <li>官方微信</li>
                </ul>
            </div>
            <div class="service">
                <ul>
                    <li>我的客服</li>
                    <li>账号保护</li>
                    <li>密码找回</li>
                    <li>资料修改</li>
                    <li>常见问题</li>
                    <li>用户协议</li>
                    <li>心享服务</li>
                </ul>
            </div>
        </div>
        <div id="header">
            <div class="malpic">
                <img src="image/malpic.png" />
                <p>适龄提示：适合12岁以上用户</p>
            </div>
            <div class="navbar">
                <ul>
                    <li>官方首页<i>HOME</i></li>
                    <li>下载中心<i>DOWNLOAD</i></li>
                    <li>岛内新闻<i>NEWS</i></li>
                    <li>游戏资料<i>INFO</i></li>
                    <li>充值专用<i>PAY</i></li>
                    <li>玩家互动<i>interaction</i></li>
                    <li>彩虹客户<i>SERVICE</i></li>
                </ul>
            </div>
        </div>
        <div id="snews">
            <div class="newsleft">
                <div class="down">
                    <div>下载</div>
                </div>
                <div class="downlist">
                    <ul>
                        <li><img src="image/qlink1_hover.png" /><em>账号注册</em></li>
                        <li><img src="image/qlink2_hover.png" /><em>领奖专区</em></li>
                        <li><img src="image/qlink3_hover.png" /><em>购卡充值</em></li>
                        <li><img src="image/qlink4_hover.png" /><em>账号保护</em></li>
                        <li><img src="image/qlink5_hover.png" /><em>密码找回</em></li>
                        <li><img src="image/qlink6_hover .png" /><em>游戏论坛</em></li>
                    </ul>
                </div>

            </div>
            <div id="newscenter">
                <div class="centertitle">
                    <ul>
                        <li class="lion">综合新闻</li>
                        <li>热门活动</li>
                        <li>商品促销</li>
                        <li>最新活动</li>
                        <em>更多新闻</em>
                    </ul>
                </div>
                <div class="centerinfo">
                    <ul>
                        <li><span>[活动]</span>
                            <p>冒险岛冬季新版本 系统全新上架角色删除功能</p><em>2018/12/5</em>
                        </li>
                        <li><span>[活动]</span>
                            <p>挑战堆王冠 收集星之女神留下的闪亮王冠</p><em>2018/12/5</em>
                        </li>
                        <li><span>[活动]</span>
                            <p>平衡汪军团出击 一起维持冒险岛世界的和平美好</p><em>2018/12/5</em>
                        </li>
                        <li><span>[活动]</span>
                            <p>品克缤敲敲乐更新 真红装备饰品A级潜能全面提升</p><em>2018/12/5</em>
                        </li>
                        <li><span>[活动]</span>
                            <p>转蛋万花筒更新 冬季暖心告白汪星人陪伴你左右</p><em>2018/12/5</em>
                        </li>
                        <li><span>[商品]</span>
                            <p class="fontcolor1">初冬季节 豪华羊绒套装与萌宠包围的舒适暖意</p><em>2018/12/5</em>
                        </li>
                        <li><span>[商品]</span>
                            <p class="fontcolor1">怪怪卡牌突破包更新 黑暗幽灵系列怪怪神秘登场</p><em>2018/12/5</em>
                        </li>
                        <li><span>[商品]</span>
                            <p class="fontcolor1">晶莹剔透的冬日雪花礼物袋 温情回归游戏商城</p><em>2018/12/5</em>
                        </li>
                        <li><span>[商品]</span>
                            <p class="fontcolor2">周日冒险岛福利开启 符文经验值与持续时间双倍</p><em>2018/12/5</em>
                        </li>
                        <li><span>[商品]</span>
                            <p class="fontcolor2">更新领星星 登录游戏就能领取500颗星星福利</p><em>2018/12/5</em>
                        </li>
                    </ul>
                    <ul style="display:none">
                        <li><span>[活动]</span>
                            <p>冒险岛冬季新版本 系统全新上架角色删除功能</p><em>2018/12/5</em>
                        </li>
                        <li><span>[活动]</span>
                            <p>挑战堆王冠 收集星之女神留下的闪亮王冠</p><em>2018/12/5</em>
                        </li>
                        <li><span>[活动]</span>
                            <p>平衡汪军团出击 一起维持冒险岛世界的和平美好</p><em>2018/12/5</em>
                        </li>
                        <li><span>[活动]</span>
                            <p>品克缤敲敲乐更新 真红装备饰品A级潜能全面提升</p><em>2018/12/5</em>
                        </li>
                        <li><span>[活动]</span>
                            <p>转蛋万花筒更新 冬季暖心告白汪星人陪伴你左右</p><em>2018/12/5</em>
                        </li>
                        <li><span>[活动]</span>
                            <p class="fontcolor2">周日冒险岛福利开启 符文经验值与持续时间双倍</p><em>2018/12/5</em>
                        </li>
                        <li><span>[活动]</span>
                            <p class="fontcolor2">更新领星星 登录游戏就能领取500颗星星福利</p><em>2018/12/5</em>
                        </li>
                        <li><span>[活动]</span>
                            <p>冒险岛快闪店最后一站 武汉网鱼网咖派对开启倒计时！</p><em>2018/12/5</em>
                        </li>
                        <li><span>[活动]</span>
                            <p>毛莫的灵魂争夺战第三季 美女与野兽的爱情对弈</p><em>2018/12/5</em>
                        </li>
                        <li><span>[活动]</span>
                            <p>转蛋万花筒更新 为你寻找那片冬日里的幸运彩虹</p><em>2018/12/5</em>
                        </li>
                    </ul>
                    <ul style="display:none">
                        <li><span>[商品]</span>
                            <p class="fontcolor1">初冬季节 豪华羊绒套装与萌宠包围的舒适暖意</p><em>2018/12/5</em>
                        </li>
                        <li><span>[商品]</span>
                            <p class="fontcolor1">晶莹剔透的冬日雪花礼物袋 温情回归游戏商城</p><em>2018/12/5</em>
                        </li>
                        <li><span>[商品]</span>
                            <p class="fontcolor1">平衡汪军团出击 一起维持冒险岛世界的和平美好</p><em>2018/12/5</em>
                        </li>
                        <li><span>[商品]</span>
                            <p class="fontcolor1">怪怪卡牌突破包更新 黑暗幽灵系列怪怪神秘登场</p><em>2018/12/5</em>
                        </li>
                        <li><span>[商品]</span>
                            <p class="fontcolor1">冒险岛郊游日出发 带上骑宠和小伙伴一起去旅行</p><em>2018/12/5</em>
                        </li>
                        <li><span>[商品]</span>
                            <p class="fontcolor1">伤害皮肤万花筒突破包更新 当恶魔遇上小公主</p><em>2018/12/5</em>
                        </li>
                        <li><span>[商品]</span>
                            <p class="fontcolor1">感恩节特别活动 丰收时节和亲友一起举办盛宴派对！</p><em>2018/12/5</em>
                        </li>
                        <li><span>[商品]</span>
                            <p class="fontcolor1">怪怪卡牌突破包更新第二弹 挑战黑暗大魔王</p><em>2018/12/5</em>
                        </li>
                        <li><span>[商品]</span>
                            <p class="fontcolor2">周日冒险岛福利开启 符文经验值与持续时间双倍</p><em>2018/12/5</em>
                        </li>
                        <li><span>[商品]</span>
                            <p class="fontcolor1">求爱大作战最后一天 爱情传递篮&恋恋草莓19点抢购！</p><em>2018/12/5</em>
                        </li>
                    </ul>
                    <ul style="display:none">
                        <li><span>[公告]</span>
                            <p class="fontcolor2">v157更新 12月5日上午全区服停机维护公告(已完成)</p><em>2018/12/5</em>
                        </li>
                        <li><span>[公告]</span>
                            <p class="fontcolor2">官论冒险月刊201812期 千里黄云白日曛</p><em>2018/12/5</em>
                        </li>
                        <li><span>[公告]</span>
                            <p class="fontcolor2">V156复古世界版本内容满意度问卷调查</p><em>2018/12/5</em>
                        </li>
                        <li><span>[公告]</span>
                            <p class="fontcolor2">感恩节感谢有你陪伴 管管暖心感恩祝福送给你</p><em>2018/12/5</em>
                        </li>
                        <li><span>[公告]</span>
                            <p class="fontcolor2">双11红心巧克力买10送1表爱意活动发奖公告</p><em>2018/12/5</em>
                        </li>
                        <li><span>[公告]</span>
                            <p class="fontcolor2">T144测试开放及完整客户端下载公告（附带补丁）</p><em>2018/12/5</em>
                        </li>
                        <li><span>[公告]</span>
                            <p class="fontcolor2">11月13日全区全服分频道维护公告（已完成）</p><em>2018/12/5</em>
                        </li>
                        <li><span>[公告]</span>
                            <p class="fontcolor2">11月2日二区停机维护公告</p><em>2018/12/5</em>
                        </li>
                        <li><span>[公告]</span>
                            <p class="fontcolor2">官论冒险月刊201811期 黃叶丹枫</p><em>2018/12/5</em>
                        </li>
                        <li><span>[公告]</span>
                            <p class="fontcolor2">10月30日全区全服分频道维护公告（已完成）</p><em>2018/12/5</em>
                        </li>
                    </ul>
                </div>
            </div>
            <div id="newsright">
                <ul>
                    <li><img src="image/loop1.png" /></li>
                    <li><img src="image/loop2.png" /></li>
                    <li><img src="image/loop3.png" /></li>
                </ul>
                <div>
                    <span>
                        <</span> <span class="rightspan">>
                    </span>
                </div>
            </div>
        </div>
        <div id="shoplist">
            <div class="shopleft">
                <div class="slone">
                    <div class="slonepic"><img src="image/slonepic.png" /></div>
                    <div class="slonese">
                        <select>
                            <option>查看更多历史版本</option>
                            <option>V156“复古世界”</option>
                            <option>V155“拍卖场”</option>
                            <option>V154“莫奈得”</option>
                            <option>V153“影魂异人”</option>
                            <option>V152“舰长维加”</option>
                            <option>V151“冒险岛电影节”</option>
                            <option>V150“龙脉—莫拉斯”</option>
                            <option>V149“龙脉”</option>
                            <option>V148“冬日城堡度假村”</option>
                            <option>V147“平衡喵”</option>
                            <option>V146“整装出击”</option>
                            <option>V145“埃尔露娜”</option>
                            <option>V144“超越进化”</option>
                            <option>V143“美人梦工场”</option>
                            <option>V142“有文化”</option>
                            <option>V141“废都塔”</option>
                            <option>V140“路西德”</option>
                            <option>V139“V5”</option>
                            <option>V138“异逝界”</option>
                            <option>V137“不能说的故事”</option>
                            <option>V136“水枪大作战”</option>
                            <option>V135“冒险英雄传说崛起”</option>
                            <option>V134“橡果侦探团”</option>
                        </select>
                    </div>
                </div>
                <div class="sltwo">
                    <h3>彩虹客服</h3>
                    <p>
                        24小时客服热线：95105222-8025 <br>
                        未开通95地区或海外用户请拨打：<br>
                        +86-21-50504728-8025 <br>
                        彩虹客服手机版：<a>点击下载</a><br>
                        心享受服务：<a>点击进入</a><br>
                        彩虹问答：<a>点击进入</a><br>
                    </p>
                    <ul>
                        <li class="q1"><em>防沉迷使用指南</em></li>
                        <li class="q2"><em>防沉迷信息补录</em></li>
                        <li class="q3"><em>实名信息补填入口</em></li>
                        <li class="q4"><em>举报不良信息</em></li>
                    </ul>
                </div>
                <div class="slthree">
                    <div>
                        <ul class="wwclick">
                            <li>官方微信</li>
                            <li>官方微博</li>
                        </ul>
                    </div>
                    <ul class="wwpic">
                        <li><img src="image/ewm1.jpg" /></li>
                        <li><img src="image/ewm2.jpg" /></li>
                    </ul>
                </div>
            </div>
            <div class="shopcenter">
                <div class="scone">
                    <img src="image/pay_btn.png">
                    <div>
                        <span class="spannleft">
                            <</span> <span class="spanright">>
                        </span>
                    </div>
                    <div class="ulwrap">
                        <ul>
                            <li>
                                <img src="image/14488812413634.gif">
                                <div>
                                    <p>奥尔卡睡衣<br> 礼包
                                    </p>
                                </div>
                            </li>
                            <li><img src="image/14689813199716.gif">
                                <div>
                                    <p>中式祥云_男<br>礼包</p>
                                </div>
                            </li>
                            <li><img src="image/15064987196140.gif">
                                <div>
                                    <p>羽毛信使<br>礼包
                                    </p>
                                </div>
                            </li>
                            <li><img src="image/15064987505068.gif">
                                <div>
                                    <p>胡子淑女_女<br>礼包</p>
                                </div>
                            </li>
                            <li><img src="image/15385303847283.gif">
                                <div>
                                    <p>小小画家套装<br>闪耀宝物盒</p>
                                </div>
                            </li>
                            <li><img src="image/15395689815660.gif">
                                <div>
                                    <p>新海豹白白_男<br>礼包</p>
                                </div>
                            </li>
                            <li><img src="image/15405194391701.gif">
                                <div>
                                    <p>暴走熊熊套装_女<br>礼包</p>
                                </div>
                            </li>
                            <li><img src="image/15409552956771.gif">
                                <div>
                                    <p>囚徒空间套装_男<br>皇家礼品袋</p>
                                </div>
                            </li>
                            <li><img src="image/15419889679775.gif">
                                <div>
                                    <p>糖果天使套装_女<br>闪耀</p>
                                </div>
                            </li>
                            <li> <img src="image/15429391384590.gif">
                                <div>
                                    <p>星夜之约套装_男<br>皇家礼品袋</p>
                                </div>
                            </li>
                            <li>
                                <img src="image/14488812413634.gif">
                                <div>
                                    <p>奥尔卡睡衣<br> 礼包
                                    </p>
                                </div>
                            </li>
                            <li><img src="image/14689813199716.gif">
                                <div>
                                    <p>中式祥云_男<br>礼包</p>
                                </div>
                            </li>
                            <li><img src="image/15064987196140.gif">
                                <div>
                                    <p>羽毛信使<br>礼包
                                    </p>
                                </div>
                            </li>
                            <li><img src="image/15064987505068.gif">
                                <div>
                                    <p>胡子淑女_女<br>礼包</p>
                                </div>
                            </li>
                            <li><img src="image/15385303847283.gif">
                                <div>
                                    <p>小小画家套装<br>闪耀宝物盒</p>
                                </div>
                            </li>
                            <li><img src="image/15395689815660.gif">
                                <div>
                                    <p>新海豹白白_男<br>礼包</p>
                                </div>
                            </li>
                            <li><img src="image/15405194391701.gif">
                                <div>
                                    <p>暴走熊熊套装_女<br>礼包</p>
                                </div>
                            </li>
                            <li><img src="image/15409552956771.gif">
                                <div>
                                    <p>囚徒空间套装_男<br>皇家礼品袋</p>
                                </div>
                            </li>
                            <li><img src="image/15419889679775.gif">
                                <div>
                                    <p>糖果天使套装_女<br>闪耀</p>
                                </div>
                            </li>
                            <li> <img src="image/15429391384590.gif">
                                <div>
                                    <p>星夜之约套装_男<br>皇家礼品袋</p>
                                </div>
                            </li>
                        </ul>
                    </div>

                </div>
                <div class="sctwo"></div>
                <div class="scthree">
                    <span class="scthreeleft">
                        <</span> <span class="scthreeright">>
                    </span>
                    <ul>
                        <li><img src="image/shoppingad1.jpg" /></li>
                        <li><img src="image/shoppingad2.gif" /></li>
                        <li><img src="image/shoppingad3.gif" /></li>
                        <li><img src="image/shoppingad4.gif" /></li>
                    </ul>
                    <script>
                        (function () {
                            var timer1;
                            var index3 = 0;
                            var num3;
                            var ospanth = document.querySelectorAll(".scthree span");
                            var oliscthree = document.querySelectorAll(".scthree  li");
                            var oulscthree = document.querySelector(".scthree ul");
                            for (var i = 0; i < ospanth.length; i++) {
                                ospanth[i].a = i;
                                ospanth[i].onclick = function () {
                                    num3 = this.a;
                                    if (num3 == 1) {
                                        index3++;
                                        if (index3 == oliscthree.length) {
                                            index3 = 0;
                                        }
                                    } else {
                                        index3--;
                                        if (index3 == -1) {
                                            index3 = oliscthree.length - 1;
                                        }
                                    }
                                    oulscthree.style.marginLeft = -612 * index3 + "px";
                                }
                            }
                            timer1 = setInterval(function () {
                                index3++;
                                if (index3 == oliscthree.length) {
                                    index3 = 0;
                                }
                                oulscthree.style.marginLeft = -612 * index3 + "px";
                            }, 2000)
                            oulscthree.onmouseover = function () {
                                clearInterval(timer1);
                            }

                            oulscthree.onmouseout = function () {
                                timer1 = setInterval(function () {
                                    index3++;
                                    if (index3 == oliscthree.length) {
                                        index3 = 0;
                                    }
                                    oulscthree.style.marginLeft = -612 * index3 + "px";
                                }, 2000);
                            }
                        })()
                    </script>
                </div>
                <div class="scfour">
                    <ul>
                        <li><span>[玩家天地]</span>
                            <p>官论冒险月刊201811期 黃叶丹枫</p><em>2018/11/01</em>
                        </li>
                        <li><span>[玩家天地]</span>
                            <p>官论冒险月刊201810期 喜迎国庆</p><em>2018/10/01</em>
                        </li>
                        <li><span>[玩家天地]</span>
                            <p>官论冒险月刊201809期 重阳九月</p><em>2018/09/05</em>
                        </li>
                        <li><span>[玩家天地]</span>
                            <p>官论冒险月刊201808期 八月未央</p><em>2018/08/05</em>
                        </li>
                        <li><span>[玩家天地]</span>
                            <p>官论冒险月刊201807期 七月骄阳</p><em>2018/07/24</em>
                        </li>
                        <li><span>[玩家天地]</span>
                            <p>影魂异人深渊归来，一到五转技能抢先看</p><em>2018/06/15</em>
                        </li>
                        <li><span>[玩家天地]</span>
                            <p>官论冒险月刊201806期 六月中夏</p><em>2018/06/04</em>
                        </li>
                        <li><span>[玩家天地]</span>
                            <p>官论冒险月刊201805期 你劳动了吗</p><em>2018/05/08</em>
                        </li>
                    </ul>
                </div>
                <div class="scfive">
                    <span>
                        <</span> <span style="float:right">>
                    </span>
                    <div>
                        <ul>
                            <li><img src="image/media1.png" alt="壁纸下载"></li>
                            <li><img src="image/media2.png" alt="壁纸下载"></li>
                        </ul>
                    </div>


                </div>
            </div>
            <div id="shopright">
                <div class="srone">
                    <ul>
                        <li class="one">
                            <em></em>
                        </li>
                        <li class="two">
                            <em></em>
                        </li>
                        <li class="three">
                            <em></em>
                        </li>
                    </ul>
                </div>
                <div class="srtwo">
                    <ul>
                        <li>
                            <div><img src="image/15439810362227.png" alt=""></div>
                            <p>角色名：【天灰灰】</p>
                            <p>服务器：蓝蜗牛</p>
                        </li>
                    </ul>
                    <div>
                        <em></em>
                    </div>
                </div>
                <div class="srthree">
                    <div>
                        <div><img src="image/cooperation_icon.png" alt=""></div>
                        <ul>
                            <li>17173礼包</li>
                            <li>多玩礼包</li>
                            <li>新娘礼包</li>
                            <li>51PK礼包</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="footer">
        <ul>
            <li> <img src="image/footer_bg.png" alt=""></li>
            <li> <img src="image/footer_bg.png" alt=""></li>
        </ul>
    </div>
    <script>
        (function () {
            var oul = document.querySelector("#footer ul");
            var left = oul.offsetLeft;
            console.log(left);
            var width = oul.offsetWidth;
            var speed = 1;
            auto();
            function auto() {
                left = left - speed;
                if (left <= -width / 2) {
                    left = 0;
                }
                oul.style.left = left + "px";
                requestAnimationFrame(auto);
            }
        })()
    </script>
    </div>
    <script>
        (function () {
            var num1;
            var index2 = 0;
            var oshoppings = document.querySelectorAll(".shopcenter span");
            var oshoppingul = document.querySelector(".ulwrap ul");
            var oshoppingli = document.querySelectorAll(".ulwrap ul li");
            for (var i = 0; i < oshoppings.length; i++) {
                oshoppings[i].a = i;
                oshoppings[i].onclick = function () {
                    num1 = this.a;
                    if (num1 == 1) {
                        index2++;
                        if (index2 == oshoppingli.length / 2) {
                            index2 = 0;
                        }
                    } else {
                        index2--;
                        if (index2 == -1) {
                            index2 = oshoppingli.length / 2 - 1;
                            console.log(index2);
                        }
                    }
                    oshoppingul.style.marginLeft = -138 * index2 + "px";
                }

            }

            var index1 = 0;
            var wwclick = document.querySelectorAll(".wwclick li");
            var wwclickui = document.querySelector(".slthree div ul");
            var wwpicli = document.querySelectorAll(".wwpic li");
            for (var i = 0; i < wwclick.length; i++) {
                wwclick[i].a = i;
                wwclick[i].onclick = function () {
                    wwclick[index1].className = "";
                    wwpicli[index1].style.opacity = "0";
                    index1 = this.a;
                    if (index1 == 0) {
                        wwclickui.className = "wwclick";
                        wwpicli[index1].style.opacity = "1";
                    } else {
                        wwclickui.className = "wwclick1";
                        wwpicli[index1].style.opacity = "1";
                    }
                }
            }

            var index = 0;
            var oli = document.querySelectorAll(".centertitle li");
            var oul = document.querySelectorAll(".centerinfo ul");
            for (var i = 0; i < oli.length; i++) {
                oli[i].a = i;
                oli[i].onclick = function () {
                    oli[index].className = "";
                    oul[index].style.display = "none";
                    index = this.a;
                    this.className = "lion";
                    oul[index].style.display = "block";
                }
            }
            var onavbar = document.querySelector(".navbar");
            var onewslist = document.querySelector(".newslist");
            onavbar.onmouseover = function () {
                onewslist.style.marginTop = 0;
            }
            onavbar.onmouseout = function () {
                onewslist.style.marginTop = "-350px";
            }
            var odoen = document.querySelector(".down");
            var oi = odoen.getElementsByTagName("div")[0];
            oi.onmouseover = function () {
                this.style.transform = "rotateY(360deg)";
            }

            var timer;
            var num;
            var ind = 0;
            var newsr = document.getElementById("newsright");
            var ospan = document.querySelectorAll("#newsright span");
            var oliimg = document.querySelectorAll("#newsright li");
            var ou = newsr.getElementsByTagName("ul")[0];
            console.log(ou);
            for (var i = 0; i < ospan.length; i++) {
                ospan[i].a = i;
                ospan[i].onclick = function () {
                    num = this.a;
                    if (num == 1) {
                        ind++;
                        if (ind == oliimg.length) {
                            ind = 0;
                        }
                    } else {
                        ind--;
                        if (ind == -1) {
                            ind = oliimg.length - 1;
                        }
                    }
                    ou.style.marginLeft = -312 * ind + "px";
                }
            }
            timer = setInterval(function () {
                ind++;
                if (ind == oliimg.length) {
                    ind = 0;
                }
                ou.style.marginLeft = -312 * ind + "px";

            }, 2000)

            ou.onmouseover = function () {
                clearInterval(timer);
            }

            ou.onmouseout = function () {
                timer = setInterval(function () {
                    ind++;
                    if (ind == oliimg.length) {
                        ind = 0;
                    }
                    ou.style.marginLeft = -312 * ind + "px";

                }, 2000);
            }

        })()
    </script>
</body>
</html>